<template>
  <div>
    <div class="select-top">
      <span class="breadCrumb">
        <a-icon type="home" class="icon" /> /
        <span class="last">运维管理</span> /
        <span class="now">统计分析</span>
      </span>
      <div class="selectBg">区域选择</div>
      <j-select-depart placeholder="请选择" style="width: 430px;margin-top: -1px" v-model="areaId" />
    </div>

    <a-card :bordered="false">
      <div class="top">
        <div class="moduleTitle">
          实时监测
          <!-- <a-cascader :options="options" placeholder="请选择" @change="onChange" /> -->
        </div>
        <a-row :gutter="[17, 16]">
          <a-col :span="4">
            <div class="ter_card">
              <div class="title">
                运行中终端
                <div class="value">{{statisticData.normal}}</div>
              </div>
              <img src="@/assets/statistic/runing.png" class="runingIcon" />
            </div>
          </a-col>
          <a-col :span="4">
            <div class="ter_card">
              <div class="title" style="color: #FC8382">
                异常终端
                <div class="value" style="color: #FC8382">{{statisticData.abnormal}}</div>
              </div>
              <img src="@/assets/statistic/break.png" class="runingIcon" />
            </div>
          </a-col>
          <a-col :span="4">
            <div class="ter_card">
              <div class="title">
                在线设备
                <div class="value">{{statisticData.online}}</div>
              </div>
              <img src="@/assets/statistic/online.png" class="runingIcon" />
            </div>
          </a-col>
          <a-col :span="4">
            <div class="ter_card">
              <div class="title" style="color: #8E8E8E;">
                离线设备
                <div class="value" style="color: #8E8E8E;">{{statisticData.offline}}</div>
              </div>
              <img src="@/assets/statistic/unonline.png" class="runingIcon" />
            </div>
          </a-col>
          <a-col :span="4">
            <div class="ter_card">
              <div class="title">
                终端运行率
                <div class="value">{{statisticData.normalRatio}}%</div>
              </div>
              <a-progress type="circle" :percent="statisticData.normalRatio" :width="80" strokeColor="#2769F7"
                :strokeWidth="16" :format="()=> ''" />
            </div>
          </a-col>
          <a-col :span="4">
            <div class="ter_card">
              <div class="title">
                设备在线率
                <div class="value">{{statisticData.onlineRatio}}%</div>
              </div>
              <a-progress type="circle" :percent="statisticData.onlineRatio" :width="80" strokeColor="#2769F7"
                :strokeWidth="16" :format="()=> ''" />
            </div>
          </a-col>
        </a-row>
      </div>
    </a-card>
    <a-card class="middleContent" :bordered="false" style="margin-top: 8px">
      <div class="moduleTitle">
        运维概况
        <a-button type="primary" size="small" @click="openOmListDialog">历史数据查询</a-button>
      </div>
      <a-row class="infoContent" :gutter="[17, 16]">
        <a-col :span="12">
          <div class="ter_card" style="align-items: start;padding: 26px 0">
            <div v-for="left in infoLeftList" :key="left.prop">
              <div class="title" :style="{color: left.prop === 'timeout' ? '#F8C51C' : '#4A4A4A'}">{{left.label}}</div>
              <div class="value" :style="{color: left.prop === 'timeout' ? '#F8C51C' : '#4A4A4A'}">
                {{omInfo[left.prop]}}
                <a-icon theme="filled" style="font-size:17px" v-if="left.prop === 'timeout'" type="warning" />
              </div>
              <div v-if="left.prop === 'total'" class="tips">同比上周{{omInfo.radio}}%</div>
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="ter_card">
            <div ref="pieChart" id="pieChart" class="pieChartClass"></div>
            <div v-for="right in infoRightList" :key="right.prop" class="toolItem">
              <div class="label"><span class="point" :style="{'background': right.color}"></span>{{right.label}}</div>
              <div class="value">{{omTypeData[right.prop]}}%</div>
            </div>
          </div>
        </a-col>
      </a-row>
      <div class="subTitle">
        <div class="titleLeft">
          <img src="@/assets/statistic/subTitleIcon.png" class="subTitleIcon">
          运维工单
        </div>
        <date-select-change ref="dateChange" @getDateRange="getDateRange" />
      </div>
      <div ref="barChart" id="barChart"></div>
    </a-card>
    <a-row class="enterpriseContent" :gutter="[8, 8]">
      <a-col :span="8">
        <a-card class="middleContent" :bordered="false" style="margin-top: 8px">
          <div class="moduleTitle">
            终端能耗排名
            <a-button type="primary" size="small" @click="openTerminalDialog">历史趋势</a-button>
          </div>
          <a-table :columns="columns1" :pagination="false" :data-source="tableData1">
            <template slot="sort" slot-scope="text, record, index">
              <img :src="rankIconList[index]">
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card class="middleContent" :bordered="false" style="margin-top: 8px">
          <div class="moduleTitle">
            设备异常排名
            <a-button type="primary" size="small" @click="openDeviceBreakDialog">更多</a-button>
          </div>
          <a-table :columns="columns2" :pagination="false" :bordered="false" :data-source="tableData2">
            <template slot="sort" slot-scope="text, record, index">
              <img :src="rankIconList[index]">
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card class="middleContent" :bordered="false" style="margin-top: 8px">
          <div class="moduleTitle">
            企业响应效率排名
            <a-button type="primary" size="small" @click="openEnterpriseDialog">更多</a-button>
          </div>
          <a-table :columns="columns3" :pagination="false" :data-source="tableData3">
            <template slot="sort" slot-scope="text, record, index">
              <img :src="rankIconList[index]">
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>

    <om-list-dialog ref="omListDialog"></om-list-dialog>
    <terminal-rank-dialog ref="terminalDialog"></terminal-rank-dialog>
    <device-break-rank-dialog ref="deviceBreakDialog"></device-break-rank-dialog>
    <enterprise-rank-dialog ref="enterpriseRankDialog"></enterprise-rank-dialog>
  </div>
</template>

<script>
import OmListDialog from './modules/StatisticModule/OmListDialog'
import TerminalRankDialog from './modules/StatisticModule/TerminalRankDialog'
import DeviceBreakRankDialog from './modules/StatisticModule/DeviceBreakRankDialog'
import EnterpriseRankDialog from './modules/StatisticModule/EnterpriseRankDialog.vue'
import DateSelectChange from './modules/StatisticModule/DateSelectChange'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import {
  getStatisticDevice,
  getStatisticTerminal,
  getStatisticOmOverview,
  getStatisticOmType,
  getStatisticOm,
  getTerminalEnergyRank,
  getDeviceAlarmRank,
  getEnterpriseRank

} from '@/api/statistic'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import * as echarts from 'echarts'

let pieChart = null
let barChart = null
export default {
  name: 'StatisticAnalysis',
  mixins: [mixinDevice],
  components: {
    DateSelectChange,
    OmListDialog,
    TerminalRankDialog,
    DeviceBreakRankDialog,
    EnterpriseRankDialog
  },
  data() {
    return {
      defaultValue: '',
      rankIconList: [require('../../assets/statistic/one.png'), require('../../assets/statistic/two.png'), require('../../assets/statistic/three.png')],
      omTypeData: {},
      omInfo: {},
      statisticData: {},
      areaId: '',
      tableData1: [],
      tableData2: [],
      tableData3: [],
      columns1: [
        {
          title: '排名',
          dataIndex: 'sort',
          key: 'sort',
          align: 'center',
          width: '30px',
          scopedSlots: { customRender: 'sort' }
        },
        {
          title: '终端名称',
          dataIndex: 'terminalName',
          key: 'terminalName',
          align: 'center',
          ellipsis: true,
        },
        {
          title: (<span>当日用电量<span style="font-size: 10px">(kw·h)</span></span>),
          dataIndex: 'today',
          key: 'today',
          align: 'center',
          width: '130px'
        },
        {
          title: (<span>昨日用电量<span style="font-size: 10px">(kw·h)</span></span>),
          dataIndex: 'yesterday',
          key: 'yesterday',
          align: 'center',
          width: '130px'
        },
        {
          title: '趋势',
          dataIndex: 'tend',
          key: 'tend',
          align: 'center',
          width: '30px'
        },
      ],
      columns2: [
        {
          title: '排名',
          dataIndex: 'sort',
          key: 'sort',
          align: 'center',
          scopedSlots: { customRender: 'sort' }
        },
        {
          title: '关联终端',
          dataIndex: 'terminalName',
          key: 'terminalName',
          align: 'center'
        },
        {
          title: '设备名称',
          dataIndex: 'deviceName',
          key: 'deviceName',
          align: 'center'
        },
        {
          title: '累计报警次数',
          dataIndex: 'alarmCount',
          key: 'alarmCount',
          align: 'center'
        },
      ],
      columns3: [
        {
          title: '排名',
          dataIndex: 'sort',
          key: 'sort',
          align: 'center',
          scopedSlots: { customRender: 'sort' }
        },
        {
          title: '企业名称',
          dataIndex: 'enterpriseName',
          key: 'enterpriseName',
          align: 'center'
        },
        {
          title: '平均响应时间',
          dataIndex: 'responseTime',
          key: 'responseTime',
          align: 'center'
        }
      ],
      list: [],
      infoLeftList: [
        { label: '累计运维工单', prop: 'total' },
        { label: '已处理', prop: 'handle' },
        { label: '未处理', prop: 'unhandle' },
        { label: '超时未处理', prop: 'timeout' },
      ],
      infoRightList: [
        { label: '日常运维', color: '#2769F7', prop: 'daily' },
        { label: '公众反馈', color: '#FACE54', prop: 'feedback' },
        { label: '设备报警', color: '#FC8382', prop: 'police' },
        { label: '水质检测', color: '#74CDAF', prop: 'water' },
      ],
      pieOption: {
        tooltip: {
          trigger: 'item',
          // textStyle: {
          //   width: 180
          // }
        },
        color: ['#2769F7',
          '#FACE54',
          '#FC8382',
          '#74CDAF'],
        title: {
          show: true,
          text: '工单类型统计',
          left: 'center',
          bottom: 0,
          textStyle: {
            color: '#8E8E8E',
            fontSize: 12,
            fontFamily: 'PingFang SC'
          }
        },
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        series: [
          {
            name: '工单类型统计',
            type: 'pie',
            radius: ['56%', '80%'],
            center: ['50%', '35%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'outside'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: false
            },
            data: [
              // { value: 1048, name: '日常运维' },
              // { value: 735, name: '公众反馈' },
              // { value: 580, name: '设备报警' },
              // { value: 484, name: '水质监测' },
            ]
          }
        ]
      },
      barOption: {
        // legend: {},
        grid: {
          left: '3%',
          right: '5%',

        },
        color: ['#6C9AFE', '#F6E67A', '#BFBFBF'],
        tooltip: {},
        dataset: {
          source: [
            ['product', '已处理', '超时未处理', '未处理'],
            // ['7-21', 43.3, 85.8, 93.7],
            // ['7-22', 83.1, 73.4, 55.1],
            // ['7-23', 86.4, 65.2, 82.5],
            // ['7-24', 43.3, 85.8, 93.7],
            // ['7-25', 83.1, 73.4, 55.1],
            // ['7-26', 86.4, 65.2, 82.5],
            // ['7-27', 43.3, 85.8, 93.7],
            // ['7-28', 83.1, 73.4, 55.1],
            // ['7-29', 86.4, 65.2, 82.5],
          ]
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8D9AA9'
          },
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E0E7FF'
            }
          },
          axisLabel: {
            color: '#8D9AA9'
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: 20
          },
          {
            type: 'bar',
            barWidth: 20
          },
          {
            type: 'bar',
            barWidth: 20
          }
        ]
      }
    }
  },
  watch: {
    areaId: {
      handler: function (val) {
        this.getStatisticDevice(val)
        this.getStatisticTerminal(val)
        this.getStatisticOmOverview(val)
        this.getStatisticOmType(val)
        this.getTerminalEnergyRank(val)
        this.getEnterpriseRank(val)
        this.getDeviceAlarmRank(val)
      },
      immediate: true
    }
  },
  created() {
  },
  mounted() {

    this.initPie()
    this.initBar()
    this.$nextTick(() => {
      setTimeout(() => {
        this.$refs.dateChange.radioChange({ target: { value: '1' } })
      }, 1000)
    })
  },
  methods: {
    openEnterpriseDialog() {
      this.$refs.enterpriseRankDialog.visible = true
      this.$refs.enterpriseRankDialog.areaId = this.areaId
        // this.$refs.enterpriseRankDialog.tableData = this.tableData3
    },
    openDeviceBreakDialog() {
      this.$refs.deviceBreakDialog.visible = true
      this.$refs.deviceBreakDialog.areaId = this.areaId

      // this.$refs.deviceBreakDialog.tableData = this.tableData2
    },
    openTerminalDialog() {
      this.$refs.terminalDialog.visible = true
      this.$refs.terminalDialog.areaId = this.areaId
      console.log(this.areaId,'打开弹框')
    },
    openOmListDialog() {
      console.log(this.$refs.omListDialog, '点击')
      this.$refs.omListDialog.visible = true
    },
    // 企业响应效率排名
    getEnterpriseRank(areaId) {
      getEnterpriseRank({ areaId }).then(res => {
        console.log(res, 'res--企业响应效率排名')
        this.tableData3 = res.data.slice(0, 3)
      })
    },
    // 设备报警排名
    getDeviceAlarmRank(areaId) {
      getDeviceAlarmRank({ areaId }).then(res => {
        console.log(res, 'res--设备告警排名')
        this.tableData2 = res.data.slice(0, 3)
      })
    },
    // 终端能耗排名
    getTerminalEnergyRank(areaId) {
      getTerminalEnergyRank({ areaId }).then(res => {
        console.log(res, 'res--终端能耗排名')
        this.tableData1 = res.data.slice(0, 3)
      })
    },
    // 获取运维工单统计 - 柱状图
    getStatisticOm(startTime, endTime) {
      getStatisticOm({ areaId: this.areaId, startTime, endTime }).then(res => {
        console.log(res, 'data--获取柱状图数据')
        const dateSource = res.data.map(item => {
          return [item.date, item.handle, item.timeout, item.unhandle]
        })
        this.barOption.dataset.source = [['product', '已处理', '超时未处理', '未处理'], ...dateSource]
        barChart.setOption(this.barOption)
      })
    },
    // 获取日期切换
    getDateRange([startDate, endDate]) {
      console.log(startDate, endDate, '获取到日期切换')
      this.getStatisticOm(startDate, endDate)
    },
    // 工单类型统计-饼图
    getStatisticOmType(areaId) {
      getStatisticOmType({ areaId }).then(res => {
        this.omTypeData = res.data

        this.pieOption.series[0].data = this.infoRightList.map(item => {
          const value = this.omTypeData[item.prop]
          return { name: item.label, value }
        })
        pieChart.setOption(this.pieOption)
      })
    },
    // 设备统计
    getStatisticDevice(areaId) {
      getStatisticDevice({ areaId }).then(res => {
        this.statisticData = { ...this.statisticData, ...res.data }
      })
    },
    // 终端统计
    getStatisticTerminal(areaId) {
      getStatisticTerminal({ areaId }).then(res => {
        this.statisticData = { ...this.statisticData, ...res.data }
      })
    },
    // 运维工单统计
    getStatisticOmOverview(areaId) {
      getStatisticOmOverview({ areaId }).then(res => {
        this.omInfo = res.data
      })
    },
    initPie() {
      pieChart = echarts.init(this.$refs.pieChart)
      this.$nextTick(() => {
        window.addEventListener('resize', () => {
          pieChart.resize()
        })
      })
      pieChart.setOption(this.pieOption)
    },
    initBar() {
      barChart = echarts.init(this.$refs.barChart)
      this.$nextTick(() => {
        window.addEventListener('resize', () => {
          barChart.resize()
        })
      })
      barChart.setOption(this.barOption)
    },
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
.select-top {
  display: flex;
  // align-items: center;
  // height: 30px;
  .breadCrumb {
    font-family: PingFang SC;
    font-weight: bold;
    color: #989898;
    line-height: 30px;
    display: inline-block;
    font-size: 12px;
    .icon {
      font-size: 9px;
    }
    .last {
      vertical-align: middle;
      font-size: 12px;
    }
    .now {
      font-size: 12px;
      vertical-align: middle;
      color: #4a4a4a;
    }
  }
  .selectBg {
    width: 103px;
    height: 30px;
    color: #fff;
    background: url('../../assets/statistic/selectBg.png') no-repeat 100% 100%;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
    line-height: 30px;
    text-align: center;
    margin-left: 56px;
    margin-bottom: 8px;
  }
}
.middleContent {
  .subTitle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
    .titleLeft {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 15px;
      color: #5e5e5e;
      .subTitleIcon {
        width: 14px;
        height: 14px;
        margin-right: 6px;
      }
    }
  }
  #barChart {
    width: 100%;
    height: 240px;
  }
  ::v-deep .ant-table-tbody > :first-child {
    background: linear-gradient(90deg, #faead2 0%, #ffffff 100%);
  }
  ::v-deep .ant-table-tbody > :nth-child(2) {
    background: linear-gradient(90deg, #d5e7fe 0%, #ffffff 100%);
  }
  ::v-deep .ant-table-tbody > :last-child {
    background: linear-gradient(90deg, #e7e9f6 0%, #ffffff 100%);
  }
  ::v-deep .ant-table-tbody > tr > td {
    font-size: 12px;
    color: #4a4a4a;
    border: 0;
  }
  ::v-deep .ant-table-thead > tr > th {
    padding-left: 0;
    padding-right: 0;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 14px;
    color: #8e8e8e;
    line-height: 20px;
    background: linear-gradient(180deg, #f4f7ff 0%, #ffffff 100%);
    border: 0;
  }
}
.moduleTitle {
  font-family: PingFang SC;
  font-weight: 800;
  font-size: 16px;
  color: #4a4a4a;
  line-height: 22px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  ::v-deep .ant-btn-primary {
    background: #2769f7;
    font-size: 12px;
    padding: 0px 18px;
  }
}
.ter_card {
  display: inline-block;
  width: 100%;
  height: 120px;
  background: #f4f6ff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  justify-content: space-around;
  .pieChartClass {
    width: 78px;
    height: 96px;
  }
  .toolItem {
    .label {
      font-weight: bold;
      font-size: 14px;
      color: #4a4a4a;
      .point {
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-right: 6px;
      }
    }
    .value {
      font-weight: 800;
      font-size: 26px;
      color: #4a4a4a;
      line-height: 37px;
      margin-left: 15px;
    }
  }
}
.top {
  font-family: PingFang SC;
  .ter_card {
    .title {
      // margin-left: 23px;
      font-weight: bold;
      font-size: 16px;
      color: #8e8e8e;
      line-height: 22px;
      .value {
        font-weight: 800;
        font-size: 26px;
        color: #4a4a4a;
        line-height: 37px;
        margin-top: 8px;
      }
    }
    .runingIcon {
      width: 40px;
      height: 27px;
      // margin-left: 46px;
    }
  }
}

.infoContent {
  font-family: PingFang SC;
  .ter_card {
    .title {
      font-weight: bold;
      font-size: 14px;
      color: #4a4a4a;
      line-height: 20px;
    }
    .value {
      font-weight: 800;
      font-size: 26px;
      color: #4a4a4a;
      line-height: 37px;
    }
    .tips {
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 12px;
      color: #989898;
      line-height: 17px;
    }
  }
}
</style>